<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-cascades"></i>
          知识信息
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box">
        <el-select
            v-model="query.type"
            placeholder="知识类型"
            class="handle-select mr10"
          >
            <el-option
              v-for="item in options"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        <el-input
          v-model="query.title"
          placeholder="知识标题"
          class="handle-input mr10"
        ></el-input>


        <el-button type="primary"  @click="handleSearch"
          ><el-icon style="margin-right: 5px"><Search /></el-icon
            >搜索</el-button
        >
        <el-button  type="primary" @click="add">添加知识</el-button>
        <el-popconfirm
          title="确定要删除选中知识？"
          confirm-button-text="确定"
          cancel-button-text="取消"
          @confirm="deleteAll"
        >
          <template #reference>
            <el-button type="danger">删除选中</el-button>
          </template>
        </el-popconfirm>
      </div>
      <el-table
        :data="tableData"
        border
        class="table"
        ref="multipleTable"
        header-cell-class-name="table-header"
        @selection-change="handleSelect"
        v-loading="loading"
      >
        <el-table-column type="selection" width="70" align="center"/>
        <el-table-column label="序号" width="70" align="center" fixed>
          <template #default="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column
          prop="title"
          label="知识标题"
          width="120"
          fixed
          align="center"
        ></el-table-column>
        <el-table-column label="封面图片" align="center" width="120">
          <template #default="scope">
            <el-image :src="scope.row.logoImg"></el-image>
          </template>
        </el-table-column>
        <el-table-column label="知识类型" width="100" align="center">
          <template #default="scope">
            <el-tag
              :type="
                scope.row.type == '0'
                  ? 'danger'
                  : scope.row.type == '1'
                  ? 'success'
                  : 'warning'
              "
            >
              {{
                scope.row.type == '0'
                  ? '血糖'
                  : scope.row.type == '1'
                  ? '饮食'
                  : '其他'
              }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="summary"
          label="知识摘要"
          align="center"
        ></el-table-column>
        <el-table-column label="权重" align="center" prop="weight" width="100">
        </el-table-column>
        <el-table-column
          label="浏览量"
          align="center"
          prop="views"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="createdAt"
          label="发表时间"
          align="center"
        ></el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template #default="scope">
            <el-button
              type="text"
              icon="el-icon-edit"
              @click="handleEdit(scope.$index, scope.row)"
              ><el-icon style="margin-right: 5px"><Edit /></el-icon
              >编辑</el-button
            >
            <el-popconfirm
              title="确定要删除此条知识？"
              confirm-button-text="确定"
              cancel-button-text="取消"
              @confirm="handleDelete(scope.$index, scope.row)"
            >
              <template #reference>
                <el-button size="small" type="danger"
                  ><el-icon style="margin-right: 5px"><Delete /></el-icon
                  >删除</el-button
                >
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          layout="total, prev, pager, next"
          :current-page="query.pageIndex"
          :page-size="query.pageSize"
          :total="pageTotal"
          @current-change="handlePageChange"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import { ref, reactive } from 'vue'
import { ElMessageBox } from 'element-plus'
import request from '../../utils/request'
import { ElNotification } from 'element-plus'
import router from '../../router'
import qs from 'qs'

export default {
  setup() {
    
    const loading = ref(true)
    const tableData = ref([])
    const pageTotal = ref(0)
    const ruleForm = ref()
    const ruleFormRef = ref()
    const form = reactive({
      content: '',
    })
    const rules = reactive({
      title: [
        {
          required: true,
          message: '请输入知识标题',
          trigger: 'blur',
        },
      ],
      content: [
        {
          required: true,
          message: '请输入知识内容',
          trigger: 'blur',
        },
      ],
      type: [
        {
          required: true,
          message: '请选择知识类型',
          trigger: 'change',
        },
      ],
      image: [
        {
          required: true,
          message: '请选择文件',
          trigger: 'change',
        },
      ],
    })
    const query = reactive({
      title: '',
      type: '',
      pageIndex: 1,
      pageSize: 6,
    })

    // 增加
    const add = () => {
      router.push('knowledgeAdd')
    }
    // 查询操作
    const handleSearch = () => {
      getData()
    }
    // 分页导航
    const handlePageChange = (val) => {
      query.pageIndex = val
      getData()
    }

    //修改操作
    const handleEdit = (index, value) => {
      // sessionStorage.setItem(value.knowledgeId, JSON.stringify(value))
      router.push({
        name: 'knowledgeEdit',
        query: {
          knowledgeId: value.knowledgeId,
        },
      })
    }
    // 删除操作
    const handleDelete = (index, row) => {
      request
        .request({
          url: '/knowledge/deleteKnowledge?knowledgeIds=' + row.knowledgeId,
          method: 'get',
          params: {
            knowledgeIds: row.knowledgeId,
          },
        })
        .then((res) => {
          if (res.data.message == 'success') {
            getData()

            ElNotification({
              title: '删除成功',
              message: '成功删除知识信息',
            })
          } else {
            ElNotification({
              title: '删除失败',
              message: '请联系管理员检查失败原因',
            })
          }
        })
        .catch((e) => {
          ElNotification({
            title: '删除失败',
            message: '请联系管理员检查失败原因',
          })
        })
    }
    const handleClose = (done) => {
      ElMessageBox.confirm('Are you sure to close this dialog?')
        .then(() => {
          done()
        })
        .catch(() => {
          // catch error
        })
    }
    // 获取表格数据
    const getData = () => {
      request
        .request({
          url: '/knowledge/getKnowledgesByPageAndCondition',
          params: {
            title: query.title,
            type: query.type,
            currentPage: query.pageIndex,
            pageSize: query.pageSize,
          },
          method: 'get'
        })
        .then((res) => {
          tableData.value = res.data.data.rows
          pageTotal.value = res.data.data.count
          loading.value = false
        })
        .catch((e) => {
          console.log(e)
        })
    }
    getData()
    const selectArray = ref('')
    const handleSelect = (val) => {
      selectArray.value = []
      for (const iterator of val) {
        selectArray.value.push(iterator.knowledgeId)
      }
    }

    //删除全部选中
    const deleteAll = () => {
      loading.value = true
      JSON.stringify(selectArray.value)
      // const formData = new FormData()
      // formData.append('knowledgeIds', selectArray.value)
      request
        .request({
          url: '/knowledge/deleteKnowledge',
          method: 'get',
          // data:formData
          params: {
            knowledgeIds: selectArray.value,
          },
          paramsSerializer: (params) => {
            return qs.stringify(params, { indices: false })
          },
        })
        .then((res) => {
          if (res.data.message == 'success') {
            getData()
            ElNotification({
              title: '删除成功',
              message: '成功删除食物信息',
            })
          } else {
            ElNotification({
              title: '删除失败',
              message: '请联系管理员检查失败原因',
            })
          }
        })
        .catch((e) => {
          console.log(e)
          ElNotification({
            title: '删除失败',
            message: '请联系管理员检查失败原因',
          })
        })
    }

    const options = [
      {
        value: '0',
        label: '血糖',
      },
      {
        value: '1',
        label: '饮食',
      },
      {
        value: '2',
        label: '其他',
      },
      {
        value: '',
        label: '全部类型',
      },
    ]
    return {
      loading,
      query,
      pageTotal,
      tableData,
      form,
      ruleForm,
      ruleFormRef,
      rules,
      getData,
      handleSearch,
      handlePageChange,
      handleDelete,
      handleEdit,
      handleClose,
      add,
      handleSelect,
      deleteAll,
      options
    }
  },
}
</script>
<style lang="scss" scoped>
.handle-box {
  margin-bottom: 20px;
}

.handle-input {
  width: 200px;
  display: inline-block;
}

.table {
  width: 100%;
  font-size: 14px;
}

.mr10 {
  margin-right: 10px;
}

</style>

<style>
.el-upload--text {
  height: auto;
  width: auto;
}
.mavonEditor {
  width: 100%;
  height: 100%;
}
.el-tooltip__popper{
  max-width:20%
}
</style>
